<template>
 <div ref="titeDom" class="tite">
   {{tite.value}}
 </div>
</template>

<script lang="ts">
import {
  defineComponent,
  ref,
  Ref,
  onMounted,
  onUpdated
} from 'vue'
const EVENT_NAME = {
  moved: 'moved'
}
// import { move } from './directive'
export default defineComponent({
  name: 'tite',
  props: {
    tite: {
      required: true,
      type: Object
    }
  },
  // directives: {
  //   move
  // },
  emits: [EVENT_NAME.moved],
  setup (props) {
    const titeDom = ref<HTMLDivElement | null>(null)
    function move (el: HTMLElement, tite: any) {
      const position = tite.previousPosition || { x: props.tite.x, y: props.tite.y }
      el.classList.add(`previousPosition-${position.x}-${position.y}`)
      if (tite.previousPosition) {
        window.requestAnimationFrame(() => {
          el.classList.add(`position-${tite.x}-${tite.y}`)
        })
      }
      console.info(tite, tite.mergedFrom, 'merged-from')
      if (tite.mergedFrom) {
        el.classList.add('merged-from')
      }
      // requestAnimationFrame(rowMove)
    }

    onUpdated(() => {
      // move((titeDom as Ref<HTMLDivElement>).value)
      console.info(props.tite, props.tite.mergedFrom, `onUpdated-${props.tite.value}`)
    })
    onMounted(() => {
      console.info(props.tite, props.tite.mergedFrom, `onMounted-${props.tite.value}`)
      move((titeDom as Ref<HTMLDivElement>).value, props.tite)
    })
    return {
      titeDom
    }
  }
})
</script>

<style scoped lang="less">
.tite {
  transition: all 0.3s;
  position: absolute;
  box-sizing: border-box;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  border: 3px solid #42b983;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  background-color: #fff;
  &.merged-from {
    z-index: 1;
  }
  &.new-tite {
    animation: 200ms ;
  }
  &.previousPosition-0-0{
    transform: translate(0, 0);
  }
  &.position-0-0{
    transform: translate(0, 0) !important;
  }
  &.previousPosition-0-1 {
    transform: translate(100%, 0);
  }
  &.position-0-1 {
    transform: translate(100%, 0) !important;
  }
  &.previousPosition-0-2 {
    transform: translate(200%, 0);
  }
  &.position-0-2 {
    transform: translate(200%, 0) !important;
  }
  &.previousPosition-0-3 {
    transform: translate(300%, 0);
  }
  &.position-0-3 {
    transform: translate(300%, 0) !important;
  }
  &.previousPosition-1-0 {
    transform: translate(0, 100%);
  }
  &.position-1-0 {
    transform: translate(0, 100%) !important;
  }
  &.previousPosition-1-1 {
    transform: translate(100%, 100%);
  }
  &.position-1-1 {
    transform: translate(100%, 100%) !important;
  }
  &.previousPosition-1-2 {
    transform: translate(200%, 100%);
  }
  &.position-1-2 {
    transform: translate(200%, 100%) !important;
  }
  &.previousPosition-1-3 {
    transform: translate(300%, 100%);
  }
  &.position-1-3 {
    transform: translate(300%, 100%) !important;
  }
  &.previousPosition-2-0 {
    transform: translate(0, 200%);
  }
  &.position-2-0 {
    transform: translate(0, 200%) !important;
  }
  &.previousPosition-2-1 {
    transform: translate(100%, 200%);
  }
  &.position-2-1 {
    transform: translate(100%, 200%) !important;
  }
  &.previousPosition-2-2 {
    transform: translate(200%, 200%);
  }
  &.position-2-2 {
    transform: translate(200%, 200%) !important;
  }
  &.previousPosition-2-3 {
    transform: translate(300%, 200%);
  }
  &.position-2-3 {
    transform: translate(300%, 200%) !important;
  }
  &.previousPosition-3-0 {
    transform: translate(0, 300%);
  }
  &.position-3-0 {
    transform: translate(0, 300%) !important;
  }
  &.previousPosition-3-1 {
    transform: translate(100%, 300%);
  }
  &.position-3-1 {
    transform: translate(100%, 300%) !important;
  }
  &.previousPosition-3-2 {
    transform: translate(200%, 300%);
  }
  &.position-3-2 {
    transform: translate(200%, 300%) !important;
  }
  &.previousPosition-3-3 {
    transform: translate(300%, 300%);
  }
  &.position-3-3 {
    transform: translate(300%, 300%) !important;
  }
}
</style>
